<template>
  <!-- 表格 -->
  <my-table
    :tableData="tableData"
    :propList="propList"
    v-model:pagination="pagination"
    :tableLoading="tableLoading"
    @updateTableData="refreshTable"
  >
    <template #tableAction><el-button type="success" @click="handleAdd">新增</el-button></template>
    <template #search>
      <el-form ref="refSearchForm" :model="searchForm" :inline="true" label-width="120px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model.trim="searchForm.title" />
        </el-form-item>
      </el-form>
      <div class="search-btns">
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
    <template #cover="{ row }">
      <img :src="row.cover" alt="图片" width="auto" height="60" />
    </template>
    <template #action="{ row }">
      <el-button type="primary" @click="handleEdit(row._id)">编辑</el-button>
      <del-button @deleteHandler="deleteHandler(row._id)"></del-button>
    </template>
  </my-table>
  <!-- 新增/编辑文章弹窗 -->
  <my-drawer :title="drawerTitle" v-model="drawer" :size="drawerSize">
    <DrawerSlot
      :drawerStatus="drawerStatus"
      :editId="editId"
      ref="refDrawerSlot"
      @updateNewsData="updateNewsData"
      @closeDrawer="closeDrawer"
    ></DrawerSlot>
  </my-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import DrawerSlot from './DrawerSlot.vue'
import useTable from '@/hooks/useTable'
import { getNewList, delNews } from '@/api/news'
defineOptions({ name: 'NewsIndex' })
const refDrawerSlot = ref(null)
// 定义表格属性
const propList = ref([
  { prop: 'title', label: '文章标题' },
  { label: '文章封面', slotName: 'cover' },
  { prop: 'updatedAt', label: '更新时间' },
  { label: '操作', slotName: 'action', width: '180' }
])
// 搜索
const refSearchForm = ref(null)
const searchForm = ref({
  title: ''
})
const onSubmit = function () {
  refreshTable()
}
const onCancel = function () {
  searchForm.value = {
    title: ''
  }
  refreshTable()
}
// 获取表格列表
const { tableData, tableLoading, pagination, refreshTable } = useTable(getNewList, searchForm)

//定义弹窗属性
const drawer = ref(false)
const editId = ref('')
const drawerSize = ref(900)
const drawerTitle = computed(() => {
  return drawerStatus.value == 'update' ? '编辑新闻' : '新增新闻'
})
// 定义弹窗内容模板
const drawerStatus = ref('')
// 新增文章
const handleAdd = () => {
  drawer.value = true
  drawerStatus.value = 'add'
}
// 编辑文章
const handleEdit = (id) => {
  console.log('id: ', id)
  drawer.value = true
  drawerStatus.value = 'update'
  editId.value = id
}
// 删除文章
const deleteHandler = async (id) => {
  try {
    await delNews(id)
    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
    refreshTable()
  } catch (error) {
    console.log(error)
  }
}
// 更新表格数据
const updateNewsData = () => {
  if (drawerStatus.value == 'add') {
    pagination.value.pageNumber = 1
  }
  refreshTable()
  closeDrawer()
}
// 关闭弹窗
const closeDrawer = () => {
  refDrawerSlot.value.resetForm()
  drawer.value = false
}
</script>

<style lang="scss" scoped>
.search-btns {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
